import React, {Component} from 'react';
import {Input, Button, List, Avatar} from 'antd';
import PdfPreview from "./PdfPreview";

import {URL} from "../../../src/constant/Constant";

export default class Items extends Component{
    constructor(props){
        super(props);
        this.state = {
            projectData: '',
            path:""//pdf请求路径
        }
    }

    componentDidMount = () => {
        // fetch("http://duodao.chende.top/documentlist",{
        //     method: 'GET',
        // })
        fetch(URL.urlRoot+"/documentlist",{
            method: 'GET',
            headers: {
                "Content-Type": "application/json",
                'Authorization': window.localStorage.authorization,
            }
        })
        .then(res => {
            return res.json();
        })
        .then(res => {
console.log("ceshiyuanyin")
            console.log(res)
            console.log("ceshiyuanyin")

            this.setState({
                projectData: res
            })
        })
    }

    /** 查询方法开始*/
    handleInputValue = (e) => {
        this.setState({
            inputValue: e.target.value
        })
    }
    handleBtn = () => {
        const name = this.state.inputValue;
        let formData = new FormData();
        formData.append('title', name);
        fetch(URL.urlRoot+"/documentlist",{
            method : 'POST',
            body: formData,
            headers: {
                "Content-Type": "application/json",
                'Authorization': window.localStorage.authorization,
            }
        })
        .then((res) => {
            return res.json(); 
        })
        .then(res => {
            const data = res.data;
            this.setState({
                projectData: data
            })
        })
        .catch(err => {
            console.log(err);
        })
    }
    /**查询方法结束*/
    onClick(path) {
        console.log(path);
        this.setState({
            path: path
        })
    }

    render(){
        return(
            <div>
                <h1 style = {{textAlign: 'center'}}>参考案例集锦</h1>
                <div>
                    <Input placeholder = '请输入关键字' value = {this.state.inputValue} 
                        onChange = {this.handleInputValue } 
                        style = {{width:'300px',marginRight:'10px'}} />
                    <Button onClick = {this.handleBtn} type = 'primary' >查询</Button>
                </div>

                <div style={{float: 'left', width: '75%'}}>
                    <PdfPreview
                        path={this.state.path}
                        style={{float: 'left'}}
                    />
                </div>

                <div style={{float: 'right', width: '25%'}}>

                    <List
                        style = {{marginTop:20}}
                        itemLayout="horizontal"
                        pagination={{
                            pageSize: 5,
                            defaultPageSize:5,
                        }}
                        dataSource={this.state.projectData}
                        renderItem={item => (
                            <List.Item>
                                <List.Item.Meta
                                    avatar={<Avatar src={require("../../img/icon/4.png")} />}
                                    title={
                                        <span
                                            style={{cursor: 'pointer'}} id='span'
                                            onClick={() => this.onClick(item.downloadPath)}
                                        >
                                            {"《"+item.title+"》"}
                                        </span>
                                    }
                                    //description= {item.description}
                                />
                            </List.Item>
                        )}
                    />,

                </div>


            </div>
        )
    }
}